<template>
	<view class="content">
		<gameBasics />
		<view class="content_">
			
			<view class="time">
				<flipcountdown
					:propsType="2" 
					:endTime="game_config.time"
					:valueTime="game_config.time" value="00:00:00" zoom="0.8" />
			</view>
			<view class="team_list">
				<view class="team_item" v-for="(item ,index) in gameChall" :key="index">
					<image :src="item.teamList.pic" mode="aspectFill"  :style="{border:item.time!=0?'calc(4vmin / 7.5) solid #FED194;':'calc(4vmin / 7.5) solid rgba(0,0,0,0);'}"></image>
					<view class="">
						{{item.teamList.title}}
					</view>
					<view class="icon">
						<u-icon name="checkmark-circle-fill" size="calc(42vmin / 7.5)" :color="item.time!=0?'#FED194':'#ccc'"></u-icon>
					</view>
				</view>
			</view>
			<view class="" style="display: flex;flex-direction: row-reverse;">
				<view class="game_btn" style="margin: calc(60vmin / 7.5) calc(40vmin / 7.5);" @click="prepare" v-if="userPeople.cap_zt==2" >
					<view class="">
				
					</view>
					{{show?'准备':'已准备'}}
				</view>
				<view class=""  style="margin: calc(60vmin / 7.5) calc(40vmin / 7.5);padding: calc(20vmin / 7.5) 0;" v-else>
					等待队长准备。。。
				</view>
			</view>
		</view>
		<gameLoading/>
	</view>
</template>

<script>	



	export default {
		data() {
			return {
				teamList:[],
				game_config:{},
				gameData:{},
				userPeople:{},
				gameChall:[],
				show:true,
				acceptStatus:true
			}
		},
		onUnload() {
			this.acceptStatus=false
			// uni.$off('onMessage') 
		},

		mounted() {
			uni.$on('onMessage',(res)=>{
				if(!this.acceptStatus) return;
					this.$nextTick(()=>{
						this.$store.commit('switchGame', {
							code: false
						})
					})
					if(res.data.code!=202) return;
				this.gameData = res.data.game
				this.gameChall = res.data.game_chall
				this.game_config=res.data.game_config
				// let time=res.data.game_config.time
				// let a=~~(time/60)
				// let b=time%60
				// this.time=(a<10?`0${a}`:a)+':'+(b<10?`0${b}`:b)
				this.teamList = res.data.team
				this.userPeople = res.data.userPeople
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")			
			this.$ws.socketTask.send({
				data: JSON.stringify({
				game_id,
				user_id: userData.id
			}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},
		methods: {
       prepare(){
				 if(this.userPeople.cap_zt!=2||!this.show) return;
				 let data = {
				 	game_id: this.gameData.id,
				 	activ_id: this.gameData.activ_id,
				 	team_id: this.userPeople.teamId
				 }
				 this.$myRuquestWs('home/game/team_go', data).then(res=>{
					 uni.showToast({
					 	title: res.msg,
					 	icon:'none'
					 });
					 this.show=false
				 })
				 
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.content_{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100vh;
		width: 100vw;
		.time{
			display: flex;
			justify-content: center;
			padding:  calc(60vmin / 7.5) 0;
			transform: scale(1.2);
		}
		
		.team_list{
			display: flex;
			align-items: center; 
			justify-content: center;
			width: calc(960vmin / 7.5);
			margin: 0 auto;
			.team_item{
				position: relative;
				margin: 0 calc(20vmin / 7.5);
				image{
					width: calc(140vmin / 7.5);
					height: calc(140vmin / 7.5);
					border-radius: calc(8vmin / 7.5);
					margin-bottom: calc(15vmin / 7.5);
				}
				.icon{
					position: absolute;
					top: calc(130vmin / 7.5);
					left: 50%;
					transform: translateX(-50%);
					background-color: #fff;
					border-radius: 50%;
				}
				>view{
					color: #333;
					font-size: calc(28vmin / 7.5);
					text-align: center;
				}
			}
		}
	}
</style>
